<template>
    <div class="els-container">
      <h3 v-show="el.el == 'point-select'">
        <el-icon v-if="data.type" @click.stop="$emit('point-handle', { show: true, type: 'add' })">
          <CirclePlusFilled />
        </el-icon>
        <el-icon v-if="data.id" @click.stop="$emit('point-handle', { show: true, type: 'set' })">
          <EditPen />
        </el-icon>
      </h3>
      <h2 v-if="el.el == 'h2'">{{el.label}}</h2>
      <h3 v-else-if="el.el == 'h3'">{{el.label}}</h3>
  
      <el-input
      v-else-if="el.el == 'input'"
        :placeholder="`输入${el.label || el.place}`"
        v-model="data[el.prop]"
        :maxlength="el.max || 1000"
        :type="el.type || 'text'"
        :disabled="disabled"
        @input="$emit('change', { res:data[el.prop], el })"
    :style="{ width: props.elWidth }"

      ></el-input>
      <el-input-number
        v-else-if="el.el == 'input-number'"
        :placeholder="`${el.place ? '输入' + el.place : ''}`"
        :min="el.min || 0"
        :max="el.max || 9999999999999999"
        v-model="data[el.prop]"
        @input="onInputNumber({ el, res: data[el.prop] })"
        :disabled="disabled"
      />
      <el-input
        v-else-if="el.el == 'text-area'"
        type="textarea"
        autosize
        :placeholder="`输入${el.label || el.place}`"
        v-model="data[el.prop]"
        :maxlength="el.max || 1000"
        show-word-limit
        @input="$emit('change', { res: data[el.prop], el })"
        :disabled="disabled"
        :style="{ width: props.elWidth }"
      />
      <el-date-picker
        v-else-if="el.el == 'date'"
        v-model="data[el.prop]"
        type="date"
        placeholder="选择一个日期"
        :disabled="disabled"
        :clearable="false"
        value-format="YYYY-MM-DD"
        format="YYYY-MM-DD"
        :default-value="new Date()"
        @change="$emit('change', { res: data[el.prop], el })"
        :style="{ width: props.elWidth }"
      />
      <el-date-picker
        v-else-if="el.el == 'time'"
        v-model="data[el.prop]"
        type="datetime"
        placeholder="选择一个日期时间"
        :disabled="disabled"
        value-format="YYYY-MM-DD HH:mm:ss"
        format="YYYY-MM-DD HH:mm:ss"
        @change="$emit('change', { res: data[el.prop], el })"
        :style="{ width: props.elWidth }"
      />
      <el-date-picker
        v-else-if="el.el == 'date-range'"
        v-model="data[el.prop]"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :disabled="disabled"
        :clearable="false"
        value-format="YYYY-MM-DD"
        format="YYYY-MM-DD"
        @change="$emit('change', { res: data[el.prop], el })"
        :style="{ width: props.elWidth }"
      />
   
      <el-date-picker
        v-else-if="el.el == 'time-range'"
        v-model="data[el.prop]"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择一个日期时间范围"
        :disabled="disabled"
        :clearable="false"
        value-format="YYYY-MM-DD HH:mm:ss"
        format="YYYY-MM-DD HH:mm:ss"
        @change="$emit('change', { res: data[el.prop], el })"
        :style="{ width: props.elWidth }"
      />
      <el-switch
        v-else-if="el.el == 'switch'"
        v-model="data[el.prop]"
        active-color="#13C75B"
        @change="$emit('change', { res: data[el.prop], el })"
        :active-value="el.type ? 1 : true"
        :inactive-value="el.type ? 0 : false"
        :disabled="disabled"
      />
      <el-radio-group
        v-else-if="el.el == 'radio'"
        v-model="data[el.prop]"
        :disabled="disabled"
         @change="$emit('change', { res:data[el.prop], el })"
      >
        <el-radio
          v-for="oitem in el.options"
          :key="oitem.value"
          :label="oitem.value"
          :disabled="oitem.disabled || el.hidden"
        >{{ oitem.label }}</el-radio>
      </el-radio-group>


      <el-checkbox-group
        v-else-if="el.el == 'checkbox'"
        v-model="data[el.prop]"
        :disabled="disabled"
      >
        <el-checkbox 
          v-for="oitem in el.options"
          :key="oitem.value"
          :label="oitem.value"
          :disabled="oitem.disabled || el.hidden"
          @click="$emit('change', { res: data[el.prop], el })"
        >{{ oitem.label }}</el-checkbox >
      </el-checkbox-group>
      
      <p v-else-if="el.el == 'p'" :class="el.class" @click="$emit('change', { el })">
        {{ el.prop?data[el.prop]:'' }}
      </p>
      <el-tree-select
        v-else-if="el.el == 'three-select'"
        filterable
        v-model="data[el.prop]"
        class="m-2"
        :placeholder="`选择${el.label || el.place}`"
        :multiple="el.multiple"
        :data="el.options"
        :render-after-expand="false"
        :props="el.props"
        @change="$emit('change', { res: data[el.prop], el })"
        :disabled="disabled"
      />
      <el-select
        v-else
        :disabled="disabled"
        :clearable="el.isClear"
        filterable
        v-model="data[el.prop]"
        class="m-2"
        :placeholder="`选择${el.label || el.place}`"
        :multiple="el.multiple"
        :collapse-tags="el.collapseTags"
        @change="$emit('change',{  res: data[el.prop], el, })"
        :style="{ width: props.elWidth }"
      >
        <template #prefix v-if="showIcon(data, el)">
          <img :src="data.icon || data.url" class="icon_22" alt />
        </template>
        <el-option
          v-for="(oitem) in el.options"
          :key="el.props.value == 'self' ? oitem : oitem[el.props.value]"
          :label="el.props.label == 'self' ? oitem : oitem[el.props.label]"
          :value="el.props.value == 'self' ? oitem : oitem[el.props.value]"
        >
          <img
            v-if="oitem.url"
            :src="oitem.url"
            alt
            srcset
            class="icon_22"
            style="margin-right: 20px"
          />
          <img
            v-if="oitem.icon"
            :src="oitem.icon"
            alt
            srcset
            class="icon_22"
            style="margin-right: 20px"
          />
          <span>{{ el.props.label == "self" ? oitem : oitem[el.props.label] }}</span>
        </el-option>
      </el-select>
      <p v-if="el.fn">{{ el.fn && el.fn(data[el.prop],data) }}</p>
    </div>
  </template>
  <script>
  export default {
    name: "els-container"
  };
  </script>
  <script setup>
  import { defineProps, ref, defineEmits, onMounted, computed } from "vue";
  const emits = defineEmits([
    "change"
  ]);
  const props = defineProps({
    el: {
      type: Object,
      default: () => {}
    },
    
    data: {
      type: Object,
      default: () => {}
    },
    isView: {
      type: Boolean,
      default: false
    },
    elWidth:{
        type:String,
        default:'350px'
    }
  });
  
  const disabled = computed(() => {
    let { isView, el } = props;
    return isView || el.disabled || el.hidden;
  });
  const showIcon = (data, item) => {
    return (
      (data.icon || data.url) &&
      item.options &&
      typeof item.options[0] == "object" &&
      (item.options[0].url || item.options[0].icon)
    );
  };
  const onSelectChange = e => {
   emits("change", e);
  };
  const onInputNumber = e => {
    let { res, el } = e;
    emits("change", e);
  };
  </script>
  <style scoped lang="scss">
  </style>
  